<template>
  <div class="top_container">
    <div class="top_wrapper">
      <div v-for="(item,index) in items"
      :key="index"
      :class="['item_container',{'item_container_active':index===defaultIndex}]"
      @click="onClick(index)">{{item}}</div>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    items:{
      required:true,
      type:Array
    },
    defaultIndex:Number
  },
  data(){
    return{
  
    }
  },
  methods:{
    onClick(index){
      // this.defaultIndex = index
      this.$emit("changeSelectIndex",index)
    }
  }
}
</script>

<style scoped>
.top_container
{
  width: 100%;
  height: 64px;
  position: fixed;
  left: 0px;
  top: 0px;
  overflow: scroll;
  background-color: white;
}

.top_container::-webkit-scrollbar
{
  display: none;
}

.top_wrapper
{
  height: 64px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.top_wrapper::-webkit-scrollbar
{
  display: none;
}

.item_container
{
  height: 64px;
  line-height: 64px;
  white-space: nowrap;
  padding: 0px 20px; 
  /* border: 1px solid rebeccapurple;  */
  /* display: inline-flex; */
  /* justify-content: center;
  align-items: center; */
  flex: 1;
}

.item_container_active
{
  border-bottom: 2px solid red;
}

</style>